<template>
	<view class="container">
		<u-swiper :list="bannerList || []" height="720rpx" indicator keyName="image" :radius="0" @change="tabsChange" circular
			@click="swiperClick">
			<view slot="indicator" :style="{ width: indicatorWidth }" class="indicator">
				<view class="indicator-dot-active" :style="{ transform: `translateX(${activeDotOffset}px)` }"></view>
			</view>
		</u-swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				current: 0,
			};
		},
		computed: {
			// 动态计算 indicator 的宽度
			indicatorWidth() {
				return `${this.bannerList.length * 12}px`;
			},
			// 计算激活点的偏移量
			activeDotOffset() {
				return this.current * 12;
			},
			...mapState({
				bannerList: (state) => state.index.bannerList
			})
		},
		methods: {
			tabsChange(e) {
				this.current = e.current;
			},
			swiperClick(index) {
				const {
					root_type,
					path
				} = this.bannerList[index];
				let paramsVal = 0;
				let switchTabPath = '';
				if (root_type === 'switchTab') {
					switchTabPath = path.split('?')[0] || '';
					const paramsString = path.split('?')[1] || '';
					paramsVal = Number(paramsString.split('=')[1] || 0);
				}
				const methodMap = {
					navigateTo: () => this.$navigateTo(path),
					switchTab: () => {
						this.$switchTab(switchTabPath);
						this.$store.commit("init/setCategory", paramsVal);
					}
				};
				const handler = methodMap[root_type];
				if (handler) {
					handler();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.indicator {
		display: flex;
		position: relative;
		background-color: rgba(225, 225, 225, 0.23);
		height: 4rpx;
		border-radius: 2rpx;
	}

	.indicator-dot-active {
		position: absolute;
		width: 12px;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #FFFFFF;
		transition: transform 0.3s;
		top: 0;
	}
</style>